<template>
	<KycItem
		titleT="settings.kyc.Identity"
		:type="SettingsShowEnum.identity"
		:status="profileStore.userInfo?.identityVerifyStatus ?? 1"
		icon="account2">
		<div v-if="profileStore.userInfo?.identityVerifyStatus === 5" class="py-[14px]">
			{{ $t('settings.kyc.verifiedSuccess') }}
		</div>
		<div
			v-else-if="[2, 3].includes(profileStore.userInfo?.identityVerifyStatus ?? 1)"
			class="py-[14px]">
			{{ $t('settings.kyc.underReview') }}
		</div>
		<BaseButton
			v-else
			class="h-10"
			:block="false"
			type="primary"
			:disabled="disabled"
			:textT="failed ? 'settings.kyc.resubmit' : 'settings.kyc.Submit'"
			@click="profileStore.show.identity = true" />
	</KycItem>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { BaseButton } from '@/components/base'
import { useProfileStore } from '@/store'
import { SettingsShowEnum } from '@/types'
import { KycItem } from '../components'

const profileStore = useProfileStore()
const disabled = computed(
	() =>
		!(
			profileStore.userInfo?.emailVerify ||
			profileStore.userInfo?.mobileVerify ||
			profileStore.userInfo?.baseInfoVerifyStatus
		)
)
const failed = computed(() => profileStore.userInfo?.identityVerifyStatus === 4)
</script>
